<template>
  <div class="ywcz">
    <div class="ywcz_one">
      <div class="right_one_head">
        <div class="right_one_head_btn">
          <div class="block noBg flexCenter">
            <div class="ml20 font16">时间范围:</div>
            <div class="demonstration">
              <div>
                <div class="border1">
                  <el-date-picker
                    v-model="value1"
                    value-format="timestamp"
                    class="border1 time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="TimeChange"
                  ></el-date-picker>
                </div>
              </div>
            </div>
<!--            <div class="ml20 font16" v-show="num==1">操作方式:</div>-->
<!--            <div class="demonstration" v-show="num==1">-->
<!--              <el-select-->
<!--                @change="selectChange"-->
<!--                v-model="value"-->
<!--                class="noBg border1"-->
<!--                placeholder="请选择"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="item in userInfo"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </div>-->
<!--            <div class="ml20 font16" v-show="num==1">操作模块 :</div>-->
<!--            <div class="demonstration" v-show="num==1">-->
<!--              <el-input-->
<!--                placeholder="请输入内容"-->
<!--                @change="inputChange"-->
<!--                class="noBg border1"-->
<!--                v-model="input"-->
<!--                clearable-->
<!--              ></el-input>-->
<!--            </div>-->
            <div>
              <el-button class="btnDefault ml20" @click="backReturnYwcz">导出</el-button>
            </div>
          </div>
        </div>
        <div class="right_one_head_now">
          <span>当前位置 :</span>
          <span>业务操作审计</span>
          <span v-show="addFlag">&gt; 编辑权限</span>
        </div>
      </div>
      <div class="right_one_body table">
        <div class="table_header flex">
          <div
            v-for="(item,index) in recordInfo"
            @click="recordSellect(index)"
            :class="{bgc_record:num==index}"
            :key="index"
          >{{item.name}}</div>
        </div>
        <!-- 登入记录 -->
        <div class="fixThTable">
          <div class="tableBody table">
        <el-table
          v-show="num==0"
          :data="tableData1"
          border
          height="630"
          highlight-current-row
          @current-change="handleCurrentChange"
          style="width: 100%">
          <el-table-column prop="loginTime" label="登入时间"></el-table-column>
          <el-table-column prop="logoutStr" label="登出时间"></el-table-column>
          <el-table-column prop="rfdwmc" label="人防单位名称">
              <template slot="header">
              <div class="titleDiv">人防单位名称</div>
               <el-cascader
            :options="data"
            :props="{ checkStrictly: true }"
            style="width:50px;"
            class="noBg"
            v-model="value"
            @change="elChange"
            clearable
          ></el-cascader>
            </template>
          </el-table-column>
          <el-table-column prop="account" label="用户名"></el-table-column>
          <el-table-column prop="loginIP" label="用户IP"></el-table-column>
          <el-table-column prop="secrectLevel" label="用户密级"></el-table-column>
          <!-- <el-table-column prop="onloadObj" label="登录对象"></el-table-column> -->
          <!-- <el-table-column prop="onloadResult" label="登录结果"></el-table-column> -->
        </el-table>
          </div>
          <div class="page" v-show="num==0">
            <pages :page="page" @changePage="changePage"></pages>
          </div>
        </div>


        <!-- 操作记录 -->
<!--        <div class="fixThTable">-->
<!--          <div class="tableBody">-->
<!--        <el-table-->
<!--          v-show="num==1"-->
<!--          :data="tableData2"-->
<!--          border-->
<!--          height="630"-->
<!--          highlight-current-row-->
<!--          @current-change="handleCurrentChange"-->
<!--          style="width: 100%">-->
<!--          <el-table-column prop="operateTime" label="操作时间"></el-table-column>-->
<!--          <el-table-column prop="account" label="用户名"></el-table-column>-->
<!--          <el-table-column prop="rfdwmc" label="人防单位名称">-->
<!--              <template slot="header">-->
<!--              <div class="titleDiv">人防单位名称</div>-->
<!--               <el-cascader-->
<!--            :options="data"-->
<!--            :props="{ checkStrictly: true }"-->
<!--            style="width:80px;"-->
<!--            class="noBg"-->
<!--            v-model="value"-->
<!--            @change="czChange"-->
<!--            clearable-->
<!--          ></el-cascader>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="operateIP" label="用户IP"></el-table-column>-->
<!--          <el-table-column prop="secrectLevel" label="用户密级"></el-table-column>-->
<!--          <el-table-column prop="operateSource" label="访问对象"></el-table-column>-->
<!--          <el-table-column prop="operateType" label="操作方式"></el-table-column>-->
<!--          <el-table-column prop="operationResult" label="操作结果"></el-table-column>-->
<!--        </el-table>-->
<!--          </div>-->
<!--        <div class="page" v-show="num==1">-->
<!--          <pages :page="page1" @changePage="changePage1"></pages>-->
<!--        </div>-->
<!--        </div>-->


      </div>
    </div>
  </div>
</template>
<script>
import pages from "../base/pages.vue";
import { log } from "util";
import {baseServe} from "../../request/api";

export default {
  name: "ywczsj",
  data() {
    return {
      TreeRfdwnm:'',
       data:[],
      num: 0,
      userMd: "",
      addFlag: false,
      value1: "",
      value: "",
      input: "",
      page: {
        //总条数
        total: 0,
        //每页条数
        limit: 10,
        //当前页数
        currentPage: 1,
        pageSizes: [5, 10],
        //实际返回的条数
        dataLength: 7
      },
      page1: {
        //总条数
        total: 0,
        //每页条数
        limit: 10,
        //当前页数
        currentPage: 1,
        pageSizes: [5, 10],
        //实际返回的条数
        dataLength: 7
      },
      options: [
        {
          value: "选项1",
          label: "保密"
        },
        {
          value: "选项2",
          label: "公开"
        },
        {
          value: "选项3",
          label: "待定"
        }
      ],
      userInfo: [
        {
          value: "新增",
          label: "新增"
        },
        {
          value: "修改",
          label: "修改"
        },
        {
          value: "删除",
          label: "删除"
        }
      ],
      value: "",
      tableData1: [
        // {
        //   loginTime: "2019-08-14 08:14:20",
        //   account: "rbhg",
        //   loginIP: "172.0.001",
        //   secrectLevel: "机密",
        // }
      ],
      tableData2: [],

      recordInfo: [
        { name: "登入记录" },
        // { name: "操作记录" }
        // { name: "外(台)军兵力部署记录" }
      ]
    };
  },
  mounted() {
    this.userList();
    this.userList1();
    this.treeList()
  },
  methods: {
    //操作记录
    czChange() {
      this.TreeRfdwnm=this.value[this.value.length-1]
      // this.$store.state.TreeRfdwnm=this.value[this.value.length-1]
      // localStorage.setItem("TreeRfdwnmBmy",this.value[this.value.length-1])
      this.page.limit = 10;
      this.page.currentPage = 1;
      this.userList1()
    },
    //录入记录
    elChange() {
      this.TreeRfdwnm=this.value[this.value.length-1]
      // this.$store.state.TreeRfdwnm=this.value[this.value.length-1]
      // localStorage.setItem("TreeRfdwnmBmy",this.value[this.value.length-1])
      this.page.limit = 10;
      this.page.currentPage = 1;
      this.userList()
    },
    //联级数据
    treeList() {
      this.data = [];
      let params = {
        rfdwnm: 821
      };
      baseServe.cityList( params ).then(res => {
        res = res.data.qgrfdwModels;
        res.forEach(item => {
          this.data.push({
            label: item.rfdwmc,
            value: item.xh,
            children: item.qgrfdwModels.map(i => {
              let obj = {
                label: i.rfdwmc,
                value: i.xh,
                children: i.qgrfdwModels.map(j => {
                  let obj = {
                    label: j.rfdwmc,
                    value: j.xh
                  };
                  return obj;
                })
              };
              return obj;
            })
          });
        });
      });
    },
    //输入框筛选
    inputChange() {
      this.userList1();
    },
    //下拉筛选
    selectChange(val) {
      this.userList1();
    },
    //时间筛选
    TimeChange(val) {
      this.page.currentPage=1;
      this.userList();
    },
    //列表数据
    userList() {
      let params = {
        account: "ywy",
        limit: this.page.limit,
        start: this.page.currentPage,
        startTime: this.value1 == null ? "" : this.value1[0],
        endTime: this.value1 == null ? "" : this.value1[1] + 86399000,
        rfdwnm:this.TreeRfdwnm
      };
      this.$axios.post("/record/query/login/all", params).then(res => {
        res = res.data;
        if (res.result.resultCode == "000000") {
          this.tableData1 = [];
          let list = res.loginRecordInfos;
          this.page.total = res.totoalCount;
          list.forEach(item => {
            this.userMd = "";
            switch (item.secrectLevel) {
              case "10":
                this.userMd = "非密";
                break;
              case "20":
                this.userMd = "内部";
                break;
              case "30":
                this.userMd = "秘密";
                break;
              case "40":
                this.userMd = "机密";
                break;
            }
            this.tableData1.push({
              account: item.account,
              loginIP: item.loginIP,
              loginTime: item.loginStr,
              logoutStr: item.logoutStr,
              recordID: item.recordID,
              rfdwnm: item.rfdwnm,
              rfdwmc:item.rfdwmc,
              secrectLevel: this.userMd,
              userID: item.userID
            });
          });
        }
      });
    },
    //安全审计员
    userList1() {
      let params = {
        operateSource: this.input,
        operateType: this.value,
        account: "ywy",
        limit: this.page1.limit,
        rfdwnm:this.TreeRfdwnm,
        start: this.page1.currentPage,
        startTime: this.value1 == null ? "" : this.value1[0],
        endTime: this.value1 == null ? "" : this.value1[1] + 86399000
      };
      this.$axios.post("/record/query/operate/all", params).then(res => {
        res = res.data;
        if (res.result.resultCode == "000000") {
          this.tableData2 = [];
          let list1 = res.operateRecordInfos;
          this.page1.total = res.totoalCount;
          list1.forEach(item => {
            this.userMd = "";
            switch (item.secrectLevel) {
              case "10":
                this.userMd = "非密";
                break;
              case "20":
                this.userMd = "内部";
                break;
              case "30":
                this.userMd = "秘密";
                break;
              case "40":
                this.userMd = "机密";
                break;
            }
            this.tableData2.push({
              account: item.account,
              operateCsource: item.operateCsource,
              operateIP: item.operateIP,
              operateSource: item.operateSource,
              operateTime: item.operateTime,
              operateType: item.operateType,
              operationResult: item.operationResult,
              recordID: item.recordID,
              rfdwnm: item.rfdwnm,
              rfdwmc:item.rfdwmc,
              secrectLevel: this.userMd,
              userID: item.userID
            });
          });
        }
      });
    },
    handleCurrentChange() {},
    //编辑权限
    updataStatu() {
      this.addFlag = true;
    },
    //关闭按钮
    iconClose() {
      this.addFlag = false;
    },
    //currentPage
    changePage(data) {
      this.page = data;
      this.userList();
    },
    changePage1(data) {
      this.page1 = data;
      this.userList1();
    },
    //点击选择角色快
    recordSellect(index) {
      this.num = index;
      this.value1 = "";
      this.value = "";
      this.input = "";
      this.TreeRfdwnm=""
      this.userList();
      this.userList1();
    },
    //导出操作
    backReturnYwcz() {
      if (this.num == 0) {
        // window.location.href=this.$axios.defaults.baseURL + "/export?account=ywy&key=login"
        let params = {
          account: "ywy",
          key: "login",
          rfdwnm:this.TreeRfdwnm,
          startTime: this.value1 == null ? "" : this.value1[0],
          endTime: this.value1 == null ? "" : this.value1[1] + 86399000
        };
        this.$axios
          .post("/record/export", params, { responseType: "blob" })
          .then(res => {

            const blob = new Blob([res.data]);
            const fileName = "统计.xls";
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          });
      } else if (this.num == 1) {
        let params = {
          account: "ywy",
          key: "operate",
          operateSource: this.input,
          operateType: this.value,
          rfdwnm:this.TreeRfdwnm,
          startTime: this.value1 == null ? "" : this.value1[0],
          endTime: this.value1 == null ? "" : this.value1[1] + 86399000
        };
        this.$axios
          .post("/record/export", params, { responseType: "blob" })
          .then(res => {
            const blob = new Blob([res.data]);
            const fileName = "统计.xls";
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          });
      }
    }
  },
  components: {
    pages
  }
};
</script>
<style lang="less" >
.bgc_record {
  box-shadow: 0 0 8px 0px #2bb69f inset;
}
.ywcz {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // padding: 0 20px 20px 0;
  .ywcz_one {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 5px 2px #30334e99;
    .right_one_head {
      display: flex;
      height: 7%;
      line-height: 2;
      margin-bottom: 10px;
      justify-content: space-between;
      padding: 0 20px;
      color: #fff;
      .right_one_head_btn {
        // width: 80%;
        margin-top: 10px;
        display: flex;
        // span {
        //   display: inline-block;
        //   height: 35px;
        //   line-height: 35px;
        //   border: 1px solid;
        //   width: 120px;
        //   // margin-top: 2%;
        //   text-align: center;
        //   // background-color: #619dbf;
        //   // border-radius: 3px;
        //   // box-shadow: 0px 0px 3px 1px #54bad1;
        //   margin-right: 3%;
        //   cursor: pointer;
        //   &:active {
        //     background-color: #197fb0;
        //   }
        // }
      }
      .right_one_head_now {
        // width: 20%;
        margin-top: 20px;
      }
    }
    .right_one_body {
      background-color: transparent;
      height: 93%;
      width: 100%;
      padding: 0% 1% 2%;
      position: relative;
      box-sizing: border-box;
      .table_header {
        width: 100%;
        height: 40px;
        // background-color: #197fb0;
        div {
          width: 160px;
          line-height: 40px;
          text-align: center;
          cursor: pointer;
          background-color: #123940;
          color: white;
        }
      }

      // fzy  人防单位下拉框样式修改 ***********************
      .el-table{
        .cell{
          height: 23px;
          .titleDiv{
            line-height: 25px;
            height: 23px;
          }
          .noBg{
            width: 50px;
            height: 23px;
            padding: 0;
            .el-input{
              height: 23px;
              padding: 0;
            }
            .el-input__icon{
              width: 20px;
            }
            .el-input--suffix{
              height: 35px !important;
              .el-input__suffix{
                top: -4px;
              }
              .el-input__inner{
                display: none;
                height: 23px;
              }
            }
          }

        }
      }
      // .el-table th {
      //   background-color: #11657d;
      //   // box-shadow: 0px 0px 1px 1px #2bb69f inset;
      //   color: white;
      // }
      .el-table__body tr.current-row > td {
        background-color: transparent;
      }
      .page {
        margin-top: 20px;
      }
    }
  }
}
</style>
